<template>
    <div>
        <div id="container">
        </div>
        <div>
            <ul>
                <li v-for="park in parkArray" :key="park.parkBte">
                    {{ park.parkAdr }} -
                    停留时间: {{ park.parkMins }}分钟,
                    开始时间: {{ park.startTime }},
                    结束时间: {{ park.endTime }}
                </li>
            </ul>
        </div>
    </div>

</template>
 
<script>
//引入缺德地图
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
    securityJsCode: 'a88f3af7d3ad10ad6157191f40b02a6a'  //你的安全密钥
}
export default {
    data() {
        return {
            map: null,
            LabelsData: [],
        }
    },
    props: {
        trackArray: { // 这个名称需要与父组件中绑定的名称匹配
            type: Array, // 根据你的数据类型定义，这里是Object
            required: true // 如果这个数据是必须的，可以设置为true
        },
        parkArray: {
            type: Array, // 根据你的数据类型定义，这里是Object
            required: true // 如果这个数据是必须的，可以设置为true
        }
    },
    mounted() {
        this.addtoLabelsData(this.trackArray)
        //DOM初始化完成进行地图初始化
        this.initMap()
    },
    methods: {
        initMap() {
            let load = AMapLoader.load({
                key: "30a65aef7b5160daa39f800d9ae8c185",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                var style = {
                    url: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png", //图标地址
                    size: new AMap.Size(11, 11), //图标大小
                    anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
                };
                let map = new AMap.Map("container", {
                    zoom: 10, //地图级别
                    center: this.center, //地图中心点
                    // mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
                    viewMode: "2D", //设置地图模式
                    WebGLParams: {
                        preserveDrawingBuffer: true
                    }
                });
                var massMarks = new AMap.MassMarks(this.LabelsData, {
                    zIndex: 5, //海量点图层叠加的顺序
                    zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
                    style: style, //设置样式对象
                });
                massMarks.setMap(map);
            }).catch(e => {
                console.log(e);
            })
            console.log(load)
        },
        addtoLabelsData(row) {
            console.log(row)
            this.LabelsData = row.map((value, index) => {
                // 注意：原始数据中的经纬度字段名应与实际数据对应，您提供的是"lat"和"lon"，但代码中用了"lat"和"lng"，请根据实际情况调整。
                const latDecimal = parseFloat(value.lat) / 600000.0;
                const lonDecimal = parseFloat(value.lon) / 600000.0;
                // 格式化经纬度，保留6位小数
                const formattedLat = latDecimal.toFixed(6);
                const formattedLon = lonDecimal.toFixed(6);
                return {
                    name: `index${index}`,
                    lnglat: [parseFloat(formattedLon), parseFloat(formattedLat)],
                };
            });
            console.log(this.LabelsData);
            // 确保LabelsData至少有一项数据再进行操作
            if (this.LabelsData.length > 0) {
                // 获取第一组数据的经纬度作为center
                const firstItem = this.LabelsData[0].lnglat;
                this.center = firstItem; // 或者使用解构赋值: this.center = [...firstItem];
            }
        },
    },
}
</script>
 
<style lang="less" scoped>
#container {
    width: 1150px;
    height: 800px;
}
</style>